import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Form, Row, Button} from 'antd';
import {FormInput} from '../../component/FormItem';

import styles from './style.less';

@inject('HouseholdStore')
@observer
@cssModules(styles)
class AddUnitContent extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.HouseholdStore;
  }

  render() {
    const {batchAddUnitFields, batchAddUnitChange} = this.store;
    let scale = Math.ceil((140 / 600) * 24);
    const formItemLayout = {
      labelCol: {
        sm: {span: scale},
      },
      wrapperCol: {
        sm: {span: 24 - scale},
      },
    };

    return (
      <Form {...formItemLayout} className={styles['edit_wrap']}>
        <FormInput
          {...batchAddUnitFields}
          onChange={batchAddUnitChange}
          placeholder={'起始栋数序号，例如从1开始，请输入1'}
          label={'从第几幢开始'}
          disabled={false}
          name={'start'}
          rules={[
            {required: true, message: '必须填写内容!'},
            {
              pattern: /^\d{1,}$/,
              message: '只能输入数字',
            },
          ]}
        />
        <FormInput
          {...batchAddUnitFields}
          onChange={batchAddUnitChange}
          placeholder={'截止栋数序号，例如到10结束，请输入10'}
          label={'到第几幢结束'}
          disabled={false}
          name={'end'}
          rules={[
            {required: true, message: '必须填写内容!'},
            {
              pattern: /^\d{1,}$/,
              message: '只能输入数字',
            },
          ]}
        />
        <FormInput
          {...batchAddUnitFields}
          onChange={batchAddUnitChange}
          placeholder={'例如需要避开13，请输入13,多幢请用逗号隔开'}
          label={'需要排除的幢数'}
          disabled={false}
          name={'exclude'}
          rules={[
            {required: true, message: '必须填写内容!'},
            {
              pattern: /^[\d,]*$/,
              message: '只能输入数字和逗号',
            },
          ]}
        />
        <FormInput
          {...batchAddUnitFields}
          onChange={batchAddUnitChange}
          placeholder={'请输入每幢内的单元数，如每幢有4个单元，请输入4'}
          label={'每幢单元数'}
          disabled={false}
          name={'unit'}
          rules={[
            {required: true, message: '必须填写内容!'},
            {
              pattern: /^\d{1,}$/,
              message: '只能输入数字',
            },
          ]}
        />
        <FormInput
          {...batchAddUnitFields}
          onChange={batchAddUnitChange}
          placeholder={'(此处读取为设置该幢的统一密码，可修改)'}
          label={'统一密码'}
          type={'password'}
          disabled={false}
          name={'password'}
          rules={[
            {
              required: true,
              message: '必须填写内容!',
            },
          ]}
        />
      </Form>
    );
  }
}

export default AddUnitContent;
